<template>
	<div class="shuju_huadong">
		<div class="shuyan" v-for="(item,index) in 5" :key="index">
			<div class="shuyan1">
				<img src="../../../../assets/img/shuyan.png" />
			</div>
			<div class="shuyan2">
				<p>
					8月没拍MCN达人榜单|深码数据&美拍加联合
				</p>
				<p>
					深码数据联合美拍发布本期美拍MCN达人榜单。该榜单是与美拍深度合作的MCN机构达人榜，从达人排名、综合指数、所属机构
				</p>
				<p>发布日期：2020-09-27</p>
			</div>
		</div>
		<div class="shuju_jiazai">
			点击加载更多………
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		mounted:function(){
			window.addEventListener("scroll",this.handlescroll)
			
			for(let i=0;i<$(".shuju_huadong .shuyan").length;i++){
				$(".shuju_huadong .shuyan").eq(i).css({
					'animation-delay': i*0.1+0.25+'s'
				})
			}
			$(".shuju_huadong .shuyan").addClass("animate__animated animate__fadeInUp")
		},
		methods:{
			handlescroll(){
				
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.shuju_huadong{
		.shuyan{
			cursor: pointer;
			padding: 0.9rem 0;
			box-sizing: border-box;
			border-bottom:1px solid #F2F2F2 ;
			
			.shuyan1{
				float: left;
				width: 38%;
				img{
					width: 100%;
				}
			}
			.shuyan2{
				width: 58%;
				float: right;
				
				p:nth-of-type(1){
					font-size: 0.55rem;
					color: #333333;
					
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
				p:nth-of-type(2){
					font-size: 0.4rem;
					color: #999999;
					margin:0.75rem 0 ;
					line-height: 0.8rem;
					
					overflow : hidden;
					text-overflow: ellipsis;
					display: -webkit-box; 
					-webkit-line-clamp: 2; /* 可以显示的行数，超出部分用...表示*/
					-webkit-box-orient: vertical;
				}
				p:nth-of-type(3){
					font-size: 0.42rem;
					color: #CFCFCF;
				}
				
			}
			
		}
		.shuyan:hover{
			transition: all 0.6s ease;
			box-shadow: 0 0 0.2rem rgba(0,0,0,0.2);
			border-radius: 0.2rem;
		}
		.shuyan::after{
			content: "";
			display: block;
			clear: both;
		}
		
		.shuju_jiazai{
			text-align: center;
			margin-top:1rem ;
			color: #CFCFCF;
			font-size: 0.45rem;
			letter-spacing: 0.05rem;
			cursor: pointer;
		}
	}
</style>
